<template>
<!-- 办事指南 -->
  <div>
    <!-- 顶部导航栏 --> 
    <van-nav-bar  title="风采展示" left-arrow @click-left="$router.go(-1)"/>
    <van-tabs v-model="active" @click="activeClick">
      <!-- 教师风采 -->
      <van-tab title="教师风采">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div class="van-cellBox">
            <van-cell v-for="item in articleList"  @click="oNarticle(item.id)" :key="item.id" >
              <div class="new-imgs">
                <img :src="item.funImg" alt="">
              </div>
              <div class=" new-boxs">
                <p class="new-name">{{item.title}}</p>
              </div>
            </van-cell>
          </div>
        </van-list>
      </van-tab>
      <!-- 学院风采 -->
      <van-tab title="学员风采">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" >  
            <div class="van-cellBox">
              <van-cell v-for="item in articleList"  @click="oNarticle(item.id)" :key="item.id" >
                <div class="new-imgs">
                  <img :src="item.funImg" alt="">
                </div>
                <div class=" new-boxs">
                  <p class="new-name">{{item.title}}</p>                 
                </div>
              </van-cell>
            </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

 <script>
 import apiHttp from '../../../../../api/index'
 import { Toast } from 'vant'
  export default {
    data(){
      return{
        id:this.$route.query.id ? this.$route.query.id : '',
        active: sessionStorage.getItem('signActive') ? sessionStorage.getItem('signActive') : 0,
        content:"",
        loading: false,
        finished: false,
        articleList:[],
        type:9,
        page:0,
        total:-1
      }
    },
    watch:{
      active(newVal,oldVal){
        this.loading = true
        this.finished = false
        this.articleList = []
        this.total = -1
        this.page = 0
        if(newVal == 0){
          this.type = 9
        }else{
         this.type = 10
        }
          this.onLoad()
      }
    },
    mounted: function(){

    },
    methods:{
      activeClick(){
        sessionStorage.setItem('signActive',this.active)
      },
      // 教师风采
      oNarticle(id){
        this.$router.push({path:"/details/details",query: { id: id}});
      },
      // 教师风采---接口
      onLoad(){
        if(this.articleList.length == this.total){
            this.finished  = true
            this.loading = false;
        }else{
            this.page++
            this.getArticleList();
        }
      },
      getArticleList(){
        let params ={
          page: this.page,
          pageSize :10,
          commId:this.id,
          type:this.type
        }
        console.log(params)
        apiHttp.comIndex.getArticleList(params,resp=>{
        if(resp.resultCode == '000000'){
            for(let i = 0; i < resp.data.articleList.length; i++){
              this.articleList.push(resp.data.articleList[i])
            }
            this.total = resp.data.total
            this.loading = false;
          }else{
            Toast(resp.resultMsg)
          }
        })
      },
      
    }
  }
 </script>
 <style scoped>
  .van-cellBox::after{
    overflow: hidden;
    content: "";
    display: block;
    height: 0;
    clear: both;
  
   }
  .van-cell{
    width: 46%;
    float: left;
    margin-left: 0.4rem;
    margin-bottom: 0.4rem;
    border-radius: 10px;
  }
  .van-cell__value{
    box-shadow: 0px 0px 12px 0px rgba(86, 31, 34, 0.3);
    border-radius: 4px; 
    background-color: #ffffff;
    padding: 0.5rem;
  }
  .van-list{
    width: 100%;
    margin: 0.4rem auto;
  }
  .new-boxs{
    width: 100%;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-height: 0.8rem;
    text-align: center;
    height: 2rem;
  }
  .new-boxs p{
    overflow:hidden;
    -webkit-line-clamp:2;
    display:-webkit-box;
    -webkit-box-orient:vertical;

  }
  .new-boxs .new-name{
    margin: 0.3rem auto;
    color: #000000;
    font-size: 0.65rem;
    margin-top: 0.5rem;
    height: .8rem;
    overflow: hidden;
    line-height: .8rem;
  }
  .new-boxs .new-span{
    color: #999999;
    line-height: 0.8rem;
    font-size: 0.6rem;
  }
  .new-imgs{
    height: 6rem;
    width: 100%;
    overflow: hidden;
  }
  .new-imgs img{
    max-width: 100%;
    border-radius: 0.3rem;
  }
  .guide-content{
    overflow: hidden;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 0.7rem;
    margin-top: 0.4rem;
  }
</style>
